<template>
	<view class="all">
		<view class="login" style="height:200px;">
			<image src="/static/image/me/backGround.jpg" style="height: 200px" class="loginbg"></image>
			<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/image/me/user_defaulthead@2x.png'" style="border-radius: 100px"
			 class="personal_logo" id="personal_logo"></image>
			<view class="userinfo">
				<button size="mini" class="title" id="user_name" 
				:open-type="userInfo?'':'getUserInfo'" @getuserinfo="getUserInfo">
					{{userInfo.nickName?userInfo.nickName:"点击授权登录"}}
				</button>
				<view class="subtitle" id="shenfen">
					{{certificationText}}
				</view>
			</view>
			<!--<image src="/static/images/personal_icon_arrow.png" class="person_arrow"></image>-->
		</view>

		<view class="thirdblock">
			    <block v-for="item in viewTapList" :key="item.id">
			        
			        <view class="item" @click="onTap(item.page,item.id)" >
			            <image :src="item.imgUrl" class="item_ico"></image>
			            <span>{{item.title}}</span>
			            <image  class="item_arrow"></image>
			        </view>
			        <view class="h1"></view>
			    </block>
				
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			    userInfo: null,
				//个人页按钮列表
				viewTapList: [
					{id:'1',title:'账号信息',imgUrl:'../../static/image/me/account.png',page:'selfInfo/selfInfo',},
					{id:'2',title:'在学课程',imgUrl:'../../static/image/me/looking.png',page:'../book/mine?index=1',},
					{id:'3',title:'浏览历史',imgUrl:'../../static/image/me/booklist.png',page:'../book/mine?index=2',},
					{id:'4',title:'收藏课程',imgUrl:'../../static/image/me/favor.png',page:'../book/mine?index=0',},
					{id:'6',title:'关于',imgUrl:'../../static/image/me/about.png',page:'aboutUs/aboutUs',},
					// {id:'0',title:'',imgUrl:'',page:'',},
				]
			}
		},
		onLoad() {
			// 如果用户信息已经获取过了，就响应显示。如果信息延迟了，就调用回调
			console.log(getApp().globalData.userInfo)
			if(getApp().globalData.userInfo){
				this.userInfo = getApp().globalData.userInfo
			}else if(!this.userInfoReadyCallback){
				this.userInfoReadyCallback = (res) => {
					this.userInfo = res
				}
			}
		},
		methods: {
			// 获取用户信息，分为网页和小程序不同实现
			getUserInfo(res){
				console.log(res)
			}
		}
	}
</script>

<style>
li {
    list-style: none;
}

html, body {
    width: 100%;
    min-height: 100%;
    background: #f0f0f0;
}

.h10 {
   
    background: #f0f0f0;
}

.h1 {
    height: 1px;
    margin: 0 15px;
    background: #f0f0f0;
}

.fr {
    float: right;
}

.hint {
    color: #666;
    font-size: 11px;
    margin-right: 5px;
}
.firstblock, .secondblock, .thirdblock {
    background-color: #fff;
    border: 10px solid #f0f0f0;
    font-size: 16px;
}

/* 头部登陆 */

.loginbg {
    width: 100%;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}
.login{
   border: 10px solid #f0f0f0;
}
.login .personal_logo {
    position: absolute;
    left: 0;
    top: 55px;
    width: 70px;
    height: 70px;
    margin-left: 20px;
}

.person_arrow {
    position: absolute;
    height: 20rpx;
    right: 10px;
    width: 30rpx;
    top: 90px;
}

.login .userinfo {
    position: absolute;
    top: 80px;
    left: 80px;
}

.login .userinfo .title {
    font-size: 20px;
    color: #fff;
    background: none;
    line-height: 1;
}

.login .userinfo .subtitle {
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    display: block;
    padding: 3px;
    border-radius: 4px;
    margin: 5px 0 0 30px;
	width: 45px;
}

/* 设置条目 */

.item {
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    background-color: #fff;
}

.item_ico {
    float: left;
    width: 27px;
    height: 20px;
    padding: 13px 15px 10px 0;
}

.item_arrow {
    float: right;
    height: 40rpx;
    width: 40rpx;
    padding: 25rpx 0;
}

.presshover {
    background-color: #fafafa;
}

.font_size {
    font-size: 16px;
    color: #333;
}

</style>
